<script setup lang="ts">
import { getOrderListApi, getBasePriceListApi, wuLiuOrderApi, exportTemplateApi, exportOrderApi } from '@/apis/order'
import CyPage from '@/components/CyPage/CyPage.vue'
import ImportExcel from "@/components/ImportExcel/index.vue";
import { useDownload } from "@/hooks/useDownload";

/** 表格列表 */
const tableData = ref([])

const newTableList = ref([]);

/** 基础配置 */
const baseInfo = ref({})

/** 搜索 */
const searchParams = ref({
  page: 1,
  limits: 20,
  shop_sku: '',
  wl_time: '',
  g_time: []
})

/** 物流是否异常 */
const checked = ref(false)

/** 总页数 */
const total = ref(0)

/** 加载中 */
const loading = ref(false)

/** 表格实例 */
const tableRef = ref()

watch([checked, tableData], () => {
  if (checked.value) {
    newTableList.value = [...tableData.value].filter(item => !item.hideBadge)
  } else {
    newTableList.value = [...tableData.value]
  } 
}, {immediate: true})

/** 获取基础信息 */
const getBaseInfo = async () => {
  const data = await getBasePriceListApi()
  data.forEach((item) => {
    baseInfo.value[item.shop_sku] = item.shop_base_price || item.shop_average_price
  })
}

/** 获取列表 */
const getOrder = async () => {
  try {
    loading.value = true
    const params = {
      ...searchParams.value,
      g_time_start: searchParams.value.g_time[0],
      g_time_end: searchParams.value.g_time[1],

    }
    const data = await getOrderListApi(params)
    tableData.value = data.list.map(item => ({
      ...item,
      hideBadge: calcPrice(item)
    }))

    loading.value = false
    total.value = data.total
    scrollToTop()
  } catch(e) {
    loading.value = false
  }
  
}

/** 滚动到顶部 */
const scrollToTop = () => {
    tableRef.value.setScrollTop(0)
}

/** 重置 */
const reset = () => {
  searchParams.value = {
    page: 1,
    limits: 20,
    shop_sku: '',
    wl_time: '',
    g_time: [],
  }
  checked.value = false
  getOrder()
}

/** 计算价格是否异常 */
const calcPrice = (item) => {
  if (!(baseInfo.value[item.shop_sku] && item.kui_price !== '0')) return true
  return !(((Number(baseInfo.value[item.shop_sku]) + 3) < Number(item.kui_price)))
}

onMounted(async () => {
  await getBaseInfo()
  await getOrder()
  
})

// 导入物流信息
const importRef = ref();
const batchAdd = () => {
  let params = {
    title: "物流信息",
    tempApi: exportTemplateApi,
    importApi: wuLiuOrderApi,
    getTableList: getOrder
  };
  importRef.value.acceptParams(params);
};

/** 导出 */
const handleExport = () => {
  const params = {
    ...searchParams.value,
    g_time_start: searchParams.value.g_time[0],
    g_time_end: searchParams.value.g_time[1],

  }
  useDownload(exportOrderApi, `订单列表`, params);
};

/** 格式化时间 */
const formatter = (row) => {
  return row.g_time ? new Date(Number(row.g_time)).toISOString().replace("T", " ").slice(0, 19) : ''
}

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])

</script>

<template>
  <div class="order-container">
    <div class="search-box">
      <el-form inline>
        <el-form-item label="商品SKU">
          <el-input v-model="searchParams.shop_sku" placeholder="请输入商品SKU" clearable/>
        </el-form-item>
        <el-form-item label="物流上传时间">
          <el-input v-model="searchParams.wl_time" placeholder="请输入物流上传时间" clearable/>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="searchParams.g_time"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="x"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">物流异常</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOrder">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <div class="operate-btn">
        <el-button type="primary" @click="batchAdd">上传物流订单</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
      <el-table ref="tableRef" border :data="newTableList" stripe style="width: 100%" v-loading="loading" height="calc(100vh - 260px)">
        <el-table-column prop="shop_ch_name" label="国际订单信息" width="320">
          <template v-slot="scope">
              <div class="line-m">
                  <div>
                      订单号：{{ scope.row.order_num }}
                  </div>
                  <div>快递单号：{{ scope.row.shop_wl_num }}</div>
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="tup" label="订单所对应的商品" width="300">
          <template v-slot="scope">
            <div class="shop-item" v-for="(item, index) in scope.row.skus" :key="index">
              <el-image
                  style="width: 60px; height: 60px"
                  :src="item.shop_img"
                  :preview-src-list="[item.shop_img]"
                  fit="cover"
                  append-to-body
                />
              <div>
                <div>
                  名称：{{ item.shop_ch_name }} * {{item.order_quantity}}
                </div>
                <div>sku：{{ item.shop_sku }}</div>
                <!-- <div>尺码：{{ item.shop_gg }}</div> -->
             
                <div class="price">售卖价格：￥{{ item.shop_price }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="g_time" label="下单时间" min-width="180" :formatter="formatter" />
        <el-table-column prop="kui_weight" label="快递重量" />
        <el-table-column label="快递金额">
          <template v-slot="scope">
            <el-badge value="异常" class="item-badge" :hidden="scope.row.hideBadge">
              <el-button link>￥{{scope.row.kui_price}}</el-button>
            </el-badge>
          </template>
        </el-table-column>
        <el-table-column prop="wl_time" label="物流上传时间" />
      </el-table>

      <cy-page :total="total" v-model:page="searchParams.page" v-model:limit="searchParams.limits" @pagination="getOrder"></cy-page>
    </div>
    <!-- 上传物流信息 -->
    <import-excel ref="importRef"  />
  </div>
</template>

<style lang="scss" scoped>
.order-container {
  .item-badge {
    margin-top: 10px;
  }

  .price {
    font-weight: bold;
    color: red;
  }

  .shop-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    &:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
  }
}
</style>

